<template>
	<view class="box">
		<view class="item">
			<text>不接受任何消息</text>
			<u-switch v-model="value" activeColor="rgb(39,209,213)" @change='change'></u-switch>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据库获取的数据
				database: {},
				value: false,
			};
		},
		methods: {
			// uView支持的事件
			change(flag) {
				this.value = flag
				// 因为做了监听，所以不需要.then然后更新数据
				this.$api.gutMessageState(this.database)
			},
			// 获取数据
			getMessageData() {
				this.$api.getmjtMessage().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.database = res.data[0]
					}
				})
			}
		},
		created() {
			this.getMessageData()
		},
		watch: {
			database: {
				handler(newValue, oldValue) {
					this.value = newValue.state == 1 ? true : false
				},
				immediate: true, //设置为 true 时，第一次进入页面时即监听
				deep: true, // 深度监听父组件传过来对象变化 
			},
			value: {
				handler(newValue, oldValue) {
					this.database.state = newValue == true ? "1" : "2"
				},
				immediate: true, //设置为 true 时，第一次进入页面时即监听
				deep: true, // 深度监听父组件传过来对象变化 
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: calc(100vh - 88upx);
		background: rgb(242, 243, 247);
		overflow: hidden;

		.item {
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			background: white;
			box-sizing: border-box;
			padding: 0 20upx;
			margin: 70upx 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
